<template>
    <div>
   <Count ref="countData" v-slot="{user}" :countData=todos> 
    {{ user}}
    <!-- <first-count></first-count>
    插入插槽
    <p>p标签</p> -->
   </Count>
   <button @click="getData">获取子组件数据</button>
   <todo-list :todos=todos>
  <template v-slot="{todo}">
  <span>{{todo.text}}</span>
  </template>
   </todo-list>
   <div>
    {{todos}}
   </div>
  <MyInput  v-model="message"></MyInput>
  <input type="text" v-model='n'>
    </div>
  </template>
  
  <script>
  import Count from './components/Count.vue'
  import firstCount from './components/firstCount.vue'
  import todoList from './components/todoList.vue'
  import MyInput from './components/MyInput.vue'
  export default{
  name:'App',
  data(){
    return{
      message:1,
      n:1,
      todos:[
    {id:1,text:'吃饭1'},
    {id:2,text:'睡觉'},
    {id:3,text:'打麻将'}
  ]
    }
  
  },
  components:{
    Count,
    firstCount,
    todoList,
    MyInput
  },
  methods:{
    getData(){
      this.$nextTick(()=>{
        console.log('子组件数据',this.$refs['countData'].getParams());
      })
      
    }
  }
  }
  </script>
  
  <style>
  
  </style>